<template>
  <el-card>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" class="search-form">
      <el-form-item label="姓名">
        <el-select v-model="queryParams.name" placeholder="请选择姓名" style="width: 150px">
          <el-option label="置空" :value="null"></el-option>
          <el-option
              v-for="patient in patients"
              :key="patient.patientName"
              :value="patient.patientName"
              :label="patient.patientName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓别">
        <el-select v-model="queryParams.gender" placeholder="请选择性别" style="width: 100px">
          <el-option label="置空" :value="null" style="font-size: 15px;"></el-option>
          <el-option :value="0" label="男" style="font-size: 12px; font-weight: bold;"></el-option>
          <el-option :value="1" label="女" style="font-size: 12px; font-weight: bold;"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.card" placeholder="请输入身份证号" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
      </el-form-item>


    </el-form>


    <el-table :data="registrations" border style="width: 100%">
      <el-table-column prop="id" label="就诊序号" width="80"></el-table-column>
      <el-table-column prop="pname" label="姓名" width="80"></el-table-column>
      <el-table-column prop="page" label="年龄" width="80"></el-table-column>
      <el-table-column label="性别" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.pgender == 0" type="primary">男</el-tag>
          <el-tag v-else-if="scope.row.pgender == 1" type="danger">女</el-tag>
          <el-tag v-else type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pcard" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="rname" label="科室" width="80"></el-table-column>
      <el-table-column prop="sname" label="医生" width="80"></el-table-column>
      <el-table-column prop="rsRegistrationTime" label="就诊时间"></el-table-column>


      <el-table-column label="操作" width="550">
        <template #default="scope">
          <!-- 使用 CSS Grid 实现精确的网格布局 -->
          <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;">
<!--            <el-button size="small" @click="showViewCase(scope.row)">查看病例</el-button>-->
            <el-button size="small" @click="showOpenExam(scope.row)">开检查</el-button>
            <el-button size="small" @click="showPreMedi(scope.row)">开药</el-button>
            <el-button size="small" @click="showCaseWrite(scope.row)">病例编写</el-button>
            <el-button size="small" @click="showHosAppli(scope.row)">住院申请</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 2, 3, 4,6,7]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination-container">
    </el-pagination>
  </el-card>
  <!-- 病例编写弹窗 -->
  <el-dialog
      title="病例编写"
      v-model="dialogVisible"
      width="600px">
    <el-form :model="caseForm" ref="addCaseForm" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="填写医生" prop="productId">
            <el-select v-model="caseForm.sid" placeholder="请选择医生" style="width: 100%">
              <el-option
                  v-for="product in staffs"
                  :key="product.id"
                  :value="product.id"
                  :label="product.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者姓名" prop="procureId">
            <el-select v-model="caseForm.patientId" placeholder="请选择患者" style="width: 100%"  >
              <el-option
                  v-for="procure in patients"
                  :key="procure.id"
                  :value="procure.id"
                  :label="procure.patientName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="医生描述">
        <el-input v-model="caseForm.description" type="textarea" :rows="4"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitCase">保存</el-button>
    </span>
    </template>
  </el-dialog>
<!--  住院申请弹窗-->
  <el-dialog
      title="住院申请"
      v-model="dialogVisibleDouble"
      width="600px">
    <el-form :model="appForm" ref="addApplication" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="填写医生" prop="productId">
            <el-select v-model="appForm.sid" placeholder="请选择医生" style="width: 100%">
              <el-option
                  v-for="product in staffs"
                  :key="product.id"
                  :value="product.id"
                  :label="product.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者姓名" prop="procureId">
            <el-select v-model="appForm.patientId" placeholder="请选择患者" style="width: 100%"  >
              <el-option
                  v-for="procure in patients"
                  :key="procure.id"
                  :value="procure.id"
                  :label="procure.patientName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="科室" prop="procureId">
            <el-select v-model="appForm.roomId" placeholder="请选择科室" style="width: 100%"  >
              <el-option
                  v-for="room in rooms"
                  :key="room.id"
                  :value="room.id"
                  :label="room.roomName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleCloseDouble">取消</el-button>
      <el-button type="primary" @click="submitCaseDouble">保存</el-button>
    </span>
    </template>
  </el-dialog>
  <!-- 开药弹窗 -->
  <el-dialog
      title="开药"
      v-model="prescribeDialogVisible"
      width="600px">
    <el-form :model="prescribeForm" ref="addPrescribeForm" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="病人姓名" prop="ppCaseId">
            <el-select v-model="prescribeForm.ppCaseid" placeholder="请选择患者" style="width: 100%"  >
              <el-option
                  v-for="procure in patients"
                  :key="procure.id"
                  :value="procure.id"
                  :label="procure.patientName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开药医生" prop="ppWorkerId">
            <el-select v-model="prescribeForm.ppWorkerid" placeholder="请选择医生" style="width: 100%"  >
              <el-option
                  v-for="procure in staffs"
                  :key="procure.id"
                  :value="procure.id"
                  :label="procure.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="药品名称" prop="drugName">
            <el-select v-model="prescribeForm.drugName" placeholder="请选择药物" style="width: 100%">
              <el-option
                  v-for="drug in drugs"
                  :key="drug.dsNo"
                  :value="drug.dsName"
                  :label="drug.dsName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开药数量" prop="quantity">
            <el-input-number v-model="prescribeForm.quantity" :min="1" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleClosePrescribe">取消</el-button>
      <el-button type="primary" @click="submitPrescribe">添加</el-button>
    </span>
    </template>
  </el-dialog>




</template>
<script>
import {findAll} from "../api/registration.js";
import {findPatient} from "../api/patient.js";
import {addCase} from "../api/case.js";
import {ElMessage} from "element-plus";
import {findStaff, findStaffAll} from "../api/staff.js";
import {findRoom} from "../api/room.js";
import {addAppli} from "../api/application.js";
import {addPrescription, findDrugs} from "../api/drug.js";

export default {
  name: "OutPatient",
  data() {
    return {
      // ...其他数据
      currentRow: null,
      currentRowDouble: null,
      caseForm: {},
      appForm: {},
      dialogVisible: false,
      dialogVisibleDouble: false,
      // ...其他数据
      prescribeDialogVisible: false,
      prescribeForm: {
        ppCaseid: '',
       ppWorkerid: '',
        drugName: '',
        quantity: 1
      },
      drugs: [],
      // ...其他数据
      registrations: [
        {
          id: 1,
          pname: '张三',
          page: 18,
          pgender: 0,
          pcard: '123456789012345678',
          rname: '门诊部',
          sname: '张三',
          rsRegistrationTime: '2021-01-01 00:00:00',

        }
      ],
      patients: [],
      staffs:[],
      rooms:[],
      queryParams: {
        name: '',//仓库
        card: '',//采购单号
        gender: '',//供应商
        // pageNum: 1,
        // pageSize: 2 ,
      },
      pagination: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
    }
  },
  methods: {
    // ...其他方法
    showPreMedi(row) {
      this.currentRow = row;
      this.prescribeForm = {
        ppCaseid: '',
        ppWorkerid: '',
        drugName: '',
        quantity: 1
      };
      this.prescribeDialogVisible = true;
      this.loadDrugs();
    },

    async loadDrugs() {
      try {
        let { data } = await findDrugs(); // 假设这是获取药品列表的API
        console.log( data )
        this.drugs = data.obj;
      } catch (error) {
        ElMessage.error('加载药品列表失败');
      }
    },

    handleClosePrescribe() {
      this.prescribeDialogVisible = false;
    },

    submitPrescribe() {
      this.$refs.addPrescribeForm.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.prescribeForm);
            // 这里调用实际的开药API
            let { data } = await addPrescription(this.prescribeForm);
            console.log(data);
            if (data.code === 200) {
              this.$message.success('开药成功');
            }else if (data.code !== 200) {
              ElMessage.error(data.msg)
            }
          } catch (error) {
            this.$message.error('开药失败');
          }
        }
      });
      this.prescribeDialogVisible = false;
    },
    async fetchData() {
      this.queryParams.pageNum = this.pagination.pageNum
      this.queryParams.pageSize = this.pagination.pageSize
      let {data: data} = await findAll(this.queryParams)
      console.log(data)
      this.registrations = data.obj.list
      this.pagination.total = data.obj.total
      if (data.code === 200) {
        this.$message.success("数据加载成功")
      } else if (data.code !== 200) {
        ElMessage.error(data.obj)
      }
    },
    showCaseWrite(row) {
      this.currentRow = row;
      this.caseForm = {
        sid: '',
        patientId: '',
        description: ''
      };
      this.dialogVisible = true;
    },
    showOpenExam(row) {

    },
    // showPreMedi(row){
    //
    // },
    showHosAppli(row){
      this.currentRowDouble = row;
      this.appForm = {
        sid: '',
        patientId: '',
        roomId: ''
      };
      this.dialogVisibleDouble = true;
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //关闭弹窗
    handleCloseDouble() {
      this.dialogVisibleDouble = false;
    },

    // 提交病例
    submitCase() {
      // 这里可以调用API提交病例数据
      this.$refs.addCaseForm.validate(async (valid) => {
        if (valid) {
          console.log(this.caseForm);
          try {
            let {data: data} = await addCase(this.caseForm);
            // console.log(data)
            if (data.code === 200) {
              this.$message.success('病例保存成功');
            }
          } catch (error) {
            this.$message.error('请填写完整的病例信息');
          }
        }
      });

      this.dialogVisible = false;

    },
    submitCaseDouble() {
      this.$refs.addApplication.validate(async (valid) => {
        if (valid){
          try {
            console.log(this.appForm);
            let {data: data} = await addAppli(this.appForm);
            // console.log(data)
            if (data.code === 200) {
              this.$message.success('住院申请保存成功');
            }
          } catch (error) {
            this.$message.error('请填写完整的住院申请信息');
          }
        }

      });
      this.dialogVisibleDouble = false;


    },
   async loadCondition(){
     let {data: data1} = await findPatient()
     console.log(data1)
     this.patients = data1.obj
     let {data: data} = await findStaffAll()
     console.log(data)
     this.staffs = data.obj
     let {data: data2}  = await findRoom()
     console.log(data2)
     this.rooms = data2.obj
   },
    // async loadStaff() {
    //
    //   let {data: data} = await findStaff()
    //   // console.log(data)
    //   this.staffs = data.obj
    // },
    handleQuery() {
      this.fetchData()
    },
    handleSizeChange() {
      this.fetchData()
    },
    handleCurrentChange() {
      this.fetchData()
    },
    handleReset() {
      this.queryParams = {
        name: '',
        card: '',
        gender: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery()
    },
  },
  mounted() {
    this.fetchData()
    this.loadCondition()
  }
}
</script>

<style scoped>.outpatient-card {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  margin-bottom: 20px;
}

.registration-table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.case-dialog .el-dialog__body {
  padding: 20px;
}

.application-dialog .el-dialog__body {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-button {
  margin-right: 10px;
}

.dialog-footer {
  text-align: right;
}
</style>
